<template>
  <div style="background: #ffffff; padding: 30px">
    <a-row>
      <a-col :span="24">
        <a-card>
          <a-row>
            <a-col :span="8">
              <a-card>
                <a-statistic
                    title="总阅读量"
                    :value="staticData.viewCount"
                    :value-style="{ color: '#000000' }"
                    style="margin-right: 50px"
                >
                  <template #suffix>
                    <EyeOutlined/>
                  </template>
                </a-statistic>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-statistic
                    title="总点赞量"
                    :value="staticData.voteCount"
                    :value-style="{ color: '#000000' }"
                >
                  <template #suffix>
                    <LikeOutlined/>
                  </template>
                </a-statistic>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-statistic
                    title="点赞率"
                    :value="staticData.voteCount / staticData.viewCount * 100"
                    :precision="2"
                    suffix="%"
                    :value-style="{ color: '#cf1322' }"
                >
                </a-statistic>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <br/>
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic
                  title="今日阅读数"
                  :value="staticData.todayViewCount"
                  :value-style="{ color: '#575555FF' }"
              >
                <template #suffix>
                  <EyeOutlined/>
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic
                  title="今日点赞数"
                  :value="staticData.todayVoteCount"
                  :value-style="{ color: '#575555FF' }"
              >
                <template #suffix>
                  <LikeOutlined/>
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic
                  title="预计今日阅读"
                  :value="staticData.todayViewIncrease"
                  :value-style="{ color: '#0000ff' }"
              >
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic
                  title="预计今日阅读增长"
                  :value="staticData.todayViewIncreaseRateAbs"
                  :precision="2"
                  suffix="%"
                  class="demo-class"
                  :value-style="staticData.todayViewIncreaseRate < 0 ? { color: '#3f8600' } : {color: '#cf1322'}"
              >
                <template #prefix>
                  <arrow-down-outlined v-if="staticData.todayViewIncreaseRate<0"/>
                  <arrow-up-outlined v-if="staticData.todayViewIncreaseRate>0"/>
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <br/>
    <a-row>
      <a-col :span="24">
        <div id="main" style="width:100%;height:400px;"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from "vue";
import axios from "axios";

declare const echarts: any;
export default defineComponent({
  name: "TheHeader",
  setup() {
    const staticData = ref();
    staticData.value = {};
    const getStaticData = () => {
      axios.get("/ebook-snapshot/get-static-data").then((response) => {
        const data = response.data;
        if (data.success) {
          const staticResp = data.content;
          // 总点赞阅读数
          staticData.value.viewCount = staticResp[1].viewCount;
          staticData.value.voteCount = staticResp[1].voteCount;
          // 今日点赞阅读数
          staticData.value.todayViewCount = staticResp[1].viewIncrease;
          staticData.value.todayVoteCount = staticResp[1].voteIncrease;

          // 按分钟计算当前时间点在全天中所占的百分比
          const now = new Date();
          const nowRate = (now.getHours() * 60 + now.getMinutes()) / (60 * 24);
          // 今日预计阅读数
          staticData.value.todayViewIncrease = parseInt(String(staticResp[1].viewIncrease / nowRate));
          // 今日预计阅读增长百分比
          staticData.value.todayViewIncreaseRate = (staticData.value.todayViewIncrease - staticResp[0].viewIncrease) / staticResp[0].viewIncrease * 100;
          staticData.value.todayViewIncreaseRateAbs = Math.abs(staticData.value.todayViewIncreaseRate);
        }
      })
    };
    const initEcharts = (list: any) => {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main'));

      const xAxis = [];
      const seriesView = [];
      const seriesVote = [];
      for (let i = 0; i < list.length; ++i) {
        const record = list[i];
        xAxis.push(record.updateDate);
        seriesView.push(record.viewIncrease);
        seriesVote.push(record.voteIncrease);
      }
      // 指定图表配置以及数据
      const option = {
        title: {
          text: '三十天趋势图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['点赞量', '阅读量']
        },
        grid: {
          left: '1%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总阅读量',
            type: 'line',
            data: seriesView,
            smooth: true
          },
          {
            name: '总点赞量',
            type: 'line',
            data: seriesVote,
            smooth: true
          }]
      };
      myChart.setOption(option);
    }
    const getThirtyData = () => {
      axios.get("/ebook-snapshot/get-thirty-static-data").then((response)=>{
        const data = response.data;
        if (data.success) {
          const thirtyData = data.content;
          initEcharts(thirtyData);
        }
      })
    }
    onMounted(() => {
      getStaticData();
      getThirtyData();
    });
    return {
      staticData
    };
  }
})
</script>